<template>
  <div class="d_a_c search_tool">
    <div>
      <span>年份：</span>
      <el-date-picker
        v-model="form.year"
        type="year"
        value-format="yyyy"
        placeholder="请筛选（默认本年）"
      >
      </el-date-picker>
    </div>
    <div class="mg_left_20">
      <span>月份：</span>
      <el-select v-model="form.month" placeholder="请筛选（默认本月）">
        <el-option
          v-for="item in monthList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="mg_left_40">
      <span>季度：</span>
      <el-select v-model="form.quarter" placeholder="请筛选">
        <el-option
          v-for="item in quarterList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <el-button
      class="mg_left_40"
      type="primary"
      icon="el-icon-search"
      @click="search"
      >搜索</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        year: "",
        month: "",
        quarter: "",
      },
      quarterList: [
        {
          label: "一季度",
          value: 1,
        },
        {
          label: "二季度",
          value: 2,
        },
        {
          label: "三季度",
          value: 3,
        },
        {
          label: "四季度",
          value: 4,
        },
      ],
      monthList: [
        {
          label: "一月",
          value: 1,
        },
        {
          label: "二月",
          value: 2,
        },
        {
          label: "三月",
          value: 3,
        },
        {
          label: "四月",
          value: 4,
        },
        {
          label: "五月",
          value: 5,
        },
        {
          label: "六月",
          value: 6,
        },
        {
          label: "七月",
          value: 7,
        },
        {
          label: "八月",
          value: 8,
        },
        {
          label: "九月",
          value: 9,
        },
        {
          label: "十月",
          value: 10,
        },
        {
          label: "十一月",
          value: 11,
        },
        {
          label: "十二月",
          value: 12,
        },
      ],
    };
  },
  methods: {
    search() {
      let data = { ...this.form };
      if (data.year) {
        data.year = Number(data.year);
      }
      this.$emit("search", data);
    },
  },
};
</script>

<style lang="scss" scope>
.search_tool {
  color: #fff;
}
.mg_left_20 {
  margin-left: 20px;
}
.mg_left_40 {
  margin-left: 40px !important;
}
</style>